<template>
    <div class="table-page">
        <GiTable row-key="id" title="微信用户管理" :data="dataList" :columns="columns" :loading="loading"
            :scroll="{ x: '100%', y: '100%', minWidth: 1000 }" :pagination="pagination" :disabled-tools="['size']"
            :disabled-column-keys="['name']" @refresh="search">
            <template #toolbar-left>
                <a-input v-model="queryForm.nickname" placeholder="请输入昵称" allow-clear @change="search">
                    <template #prefix><icon-search /></template>
                </a-input>
                <a-select v-model="queryForm.queryType" placeholder="是否为系统用户" allow-clear @change="search">
                    <a-option :value="1">是</a-option>
                    <a-option :value="2">否</a-option>
                </a-select>
                <a-button @click="reset">
                    <template #icon><icon-refresh /></template>
                    <template #default>重置</template>
                </a-button>
            </template>
            <template #toolbar-right>
                <!-- <a-button v-permission="['card:wechatUser:add']" type="primary" @click="onAdd">
                    <template #icon><icon-plus /></template>
                    <template #default>新增</template>
                </a-button> -->
                <!-- <a-button v-permission="['card:wechatUser:export']" @click="onExport">
                    <template #icon><icon-download /></template>
                    <template #default>导出</template>
                </a-button> -->
            </template>
            <template #action="{ record }">
                <a-space>
                    <a-link v-permission="['card:wechatUser:list']" title="查看" @click="onDetail(record)">查看</a-link>
                    <!-- <a-link v-permission="['card:wechatUser:update']" title="修改" @click="onUpdate(record)">修改</a-link> -->
                    <a-link v-permission="['card:wechatUser:delete']" status="danger" :disabled="record.disabled" title="删除"
                        @click="onDelete(record)">
                        删除
                    </a-link>
                </a-space>
            </template>
            <template #nickname="{ record }">
                <GiCellAvatar :avatar="record.avatar" :name="record.nickname" />
            </template>
            <template #gender="{ record }">
                <GiCellGender :gender="record.gender" />
            </template>
            <template #userName="{ record }">
                <a-label v-if="!record.userName">{{ record.userName }}</a-label>
                <a-tag v-else color="green">{{ record.userName }}</a-tag>
            </template>
        </GiTable>

        <WechatUserAddModal ref="WechatUserAddModalRef" @save-success="search" />
        <WechatUserDetailDrawer ref="WechatUserDetailDrawerRef" />
    </div>
</template>

<script setup lang="ts">
import { deleteWechatUser, exportWechatUser, listWechatUser, type WechatUserQuery, type WechatUserResp } from '@/apis/website/wechatUser'
import type { TableInstanceColumns } from '@/components/GiTable/type'
import { useDownload, useTable } from '@/hooks'
import { isMobile } from '@/utils'
import has from '@/utils/has'
import WechatUserAddModal from './WechatUserAddModal.vue'
import WechatUserDetailDrawer from './WechatUserDetailDrawer.vue'

defineOptions({ name: 'WechatUser' })


const queryForm = reactive<WechatUserQuery>({
    nickname: '',
    queryType: '',
    sort: ['createTime,desc']
})

const {
    tableData: dataList,
    loading,
    pagination,
    search,
    handleDelete
} = useTable((page) => listWechatUser({ ...queryForm, ...page }), { immediate: true })

const columns: TableInstanceColumns[] = [
    {
        title: '序号',
        width: 66,
        align: 'center',
        fixed: !isMobile() ? 'left' : undefined,
        render: ({ rowIndex }) => h('span', {}, rowIndex + 1 + (pagination.current - 1) * pagination.pageSize),
    },
    { title: '微信openId', dataIndex: 'openId', slotName: 'openId' },
    { title: '昵称', dataIndex: 'nickname', slotName: 'nickname' },
    // { title: '头像', dataIndex: 'avatar', slotName: 'avatar' },
    { title: '性别', dataIndex: 'gender', slotName: 'gender' },
    { title: '国家', dataIndex: 'country', slotName: 'country' },
    { title: '省份', dataIndex: 'province', slotName: 'province' },
    { title: '城市', dataIndex: 'city', slotName: 'city' },
    // { title: '创建时间', dataIndex: 'createTime', slotName: 'createTime' },
    // { title: '创建人id', dataIndex: 'createUser', slotName: 'createUser' },
    // { title: '修改时间', dataIndex: 'updateTime', slotName: 'updateTime' },
    // { title: '修改人id', dataIndex: 'updateUser', slotName: 'updateUser' },
    { title: '关联用户', dataIndex: 'userName', slotName: 'userName' },
    {
        title: '操作',
        slotName: 'action',
        width: 180,
        align: 'center',
        fixed: !isMobile() ? 'right' : undefined,
        show: has.hasPermOr(['card:wechatUser:update', 'card:wechatUser:delete'])
    }
]

// 重置
const reset = () => {
    queryForm.queryType = ''

    search()
}

// 删除
const onDelete = (record: WechatUserResp) => {
    return handleDelete(() => deleteWechatUser(record.id), {
        content: `是否确定删除该条数据？`,
        showModal: true
    })
}

// 导出
const onExport = () => {
    useDownload(() => exportWechatUser(queryForm))
}

const WechatUserAddModalRef = ref<InstanceType<typeof WechatUserAddModal>>()
// 新增
const onAdd = () => {
    WechatUserAddModalRef.value?.onAdd()
}

// 修改
const onUpdate = (record: WechatUserResp) => {
    WechatUserAddModalRef.value?.onUpdate(record.id)
}

const WechatUserDetailDrawerRef = ref<InstanceType<typeof WechatUserDetailDrawer>>()
// 详情
const onDetail = (record: WechatUserResp) => {
    WechatUserDetailDrawerRef.value?.onDetail(record.id)
}
</script>

<style lang="scss" scoped></style>
